<template>
    <div class="liuyanMian">
        <div class="topBox">
            <div class="topTitle">排队区</div>
            <div class="teamList">
                <template v-if="list.length != 0">
                    <div v-for="(item, index) in list" :key="index" @click='lingHandle(index)'>
                        <div v-if="index <= jiangNum - 1" class="jiangTip">
                            <!-- <span :class="item.status == 0 ? 'tip1' : 'tip2'"> {{ item.status == 0 ? '中奖了' : '已领奖' }}</span> -->
                            <img src="../assets/nineImg/J1.jpg" alt="" v-if="item.status == 0">
                            <img src="../assets/nineImg/J2.jpg" alt="" v-else>
                        </div>
                        <img :src="item.img" alt="" :class="index <= jiangNum - 1 ? 'jianguser' : ''">
                        <!-- <template v-if="index <= jiangNum - 1">
                            <img src="../assets/nineImg/list3.jpg" @click='lingHandle(index)' alt="" class="jianguser"
                                v-if='item.status == 0'>
                            <img src="../assets/nineImg/list4.jpg" alt="" class="jianguser" v-else>
                        </template> -->

                        <!-- <img src="../assets/nineImg/list1.jpg" alt="" v-else> -->

                        <div class="jiangTip1">顾客{{ index + 1 }}</div>
                    </div>
                </template>
                <div v-else class="noBox">
                    暂无排队顾客
                </div>
            </div>
        </div>
        <div class="topBox">
            <div class="topTitle">收银区</div>
            <div class="teamList teamList1">
                <div @click="shouHandle">
                    <img src="../assets/nineImg/shou.png" alt="">
                    <div>点击收银</div>
                </div>
                <div v-for="(item, index) in cusList" class="userImg" :key="index" v-if="flag">
                    <img :src="item.img" alt="">
                    <div>来人了</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'nine',
    data() {
        return {
            flag: true,
            // 队列人数
            teamNum: 0,
            list: [],
            // 中奖人数
            jiangNum: 0,
            // 收银区顾客
            cusList: [
                {
                    img: require('../assets/nineImg/w1.png'),
                    class: 'userImg'
                },
            ],
            imgList: [
                require('../assets/nineImg/w1.png'),
                require('../assets/nineImg/w2.png'),
                require('../assets/nineImg/w3.png'),
                require('../assets/nineImg/w4.png'),
                require('../assets/nineImg/w5.png'),
                require('../assets/nineImg/w6.png'),
                require('../assets/nineImg/w7.png'),
                require('../assets/nineImg/w8.png'),
                require('../assets/nineImg/w9.png'),
                require('../assets/nineImg/w10.png'),
                require('../assets/nineImg/w11.png'),

                // require('../assets/nineImg/m1.png'),
                // require('../assets/nineImg/m2.png'),
                // require('../assets/nineImg/m3.png'),
                // require('../assets/nineImg/m4.png'),
                // require('../assets/nineImg/m5.png'),
                // require('../assets/nineImg/m6.png'),
                // require('../assets/nineImg/m8.png'),
                // require('../assets/nineImg/m9.png'),
                // require('../assets/nineImg/m10.png'),
                // require('../assets/nineImg/m11.png'),
                // require('../assets/nineImg/m12.png'),

            ],
        }
    },
    created() {
    },
    methods: {
        lingHandle(index) {
            if (index <= this.jiangNum - 1) {
                this.list[index].status = 1
                // this.$message.success('领取成功')
            }
        },
        shouHandle() {
            this.flag = false
            var num = Math.floor((Math.random() * 11))
            var delImg = this.cusList.shift()
            this.cusList.push({
                img: this.imgList[num],
                class: 'userImg'
            })
            this.list.push({
                img: delImg.img,
                status: 0,// 0 未领奖  1 已领奖
            })
            setTimeout(() => {
                this.flag = true
            }, 100);
            this.jiangNum = parseInt(this.list.length / 9)
        },
    }
}
</script>

<style lang="less" scoped>
.topBox {
    box-sizing: border-box;
    padding: 30px 60px;
    width: 100%;
}

.jianguser {
    position: relative;
    // top: -20px;
    height: 100px !important;
    transform: scale(1.3); // transform:scaleY(1.4);
    cursor: pointer;
}

.topTitle {
    font-size: 32px;
    color: #000;
    font-weight: bold;
}

.teamList {
    padding-left: 10px;
    width: 100%;
    height: 630px;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    overflow-y: scroll;
}

.teamList1::-webkit-scrollbar {
    display: none;
}

.teamList1 {
    height: 240px;
}

.teamList>div {
    margin-right: 94px;
    position: relative;
    margin-top: 70px;
    width: 100px;
    height: 100px;
    // border: 2px solid red;
}

.teamList>div>img {
    width: 100%;
    height: 100%;
}

.teamList1>div {
    margin-top: 40px;
    position: relative;
    width: 120px;
    height: 120px;
}

.teamList1>div:not(:first-child) {
    position: relative;
    left: 50px;
}

.teamList1>div:first-child {
    cursor: pointer;
    color: #409EFF;
    font-size: 14px;
}

.teamList1>div>div {
    width: 120px;
    text-align: center;
    position: absolute;
    bottom: -20px;
    color: #F56C6C;
}

.teamList1>div:first-child>img {
    width: 120px;
    height: 120px;
}

.jiangTip {
    position: absolute;
    top: -26px;
    width: 100%;
    text-align: center;
    font-size: 16px;
}

.tip1 {
    color: #409EFF;
}

.tip2 {
    color: green;
}

.jiangTip>img {
    position: absolute;
    top: -18px;
    left: 14px;
    width: 80px;
    height: 30px;
    z-index: 10;
}

.jiangTip1 {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -26px;
}





.noBox {
    width: 100% !important;
    font-size: 28px;
    margin-top: 30px;
    font-weight: bold;
    color: #000;
}


.userImg {
    animation: round_animate .5s linear forwards;
    -webkit-animation: round_animate .5s linear forwards;
}

@keyframes round_animate {
    0% {
        transform: scale(.2);
    }

    50% {
        transform: scale(.7);
    }

    100% {
        transform: scale(1.2);
    }
}
</style>